<template>
	<div id="luckyDraw">
		<div id="header">
			<img @click="$router.go(-1)" src="../../static/img/return.png"/>
			<p>金币抽奖</p>
		</div>
		<div class="luckyDraw_1">
			<img src="../../static/img/luckyDraw-01.jpg"/>
			<p class="balance">金币余额：{{balance}}</p>
			<p class="num">今天剩余<span>{{num}}</span>次机会</p>
		</div>
		<div class="luckyDraw_2">
			<img src="../../static/img/luckyDraw-02.jpg"/>
			<div class="disc">
				<div class="pointer">
					<div :style="{transform:rotate_angle,transition:rotate_transition}">
						<img src="../../static/img/luckyDraw-04.png"/>
					</div>
					<div>
						<img @click="torotat()" src="../../static/img/luckyDraw-05.png"/>
					</div>
				</div>
			</div>
		</div>
		<div class="luckyDraw_3">
			<img src="../../static/img/luckyDraw-03.jpg"/>
			<h3>中奖名单</h3>
			<ul>
				<li v-for="item in luckyList"><span>{{item.usName}}</span>抽中了<span>{{item.resultMoney}}{{item.resultType == 2?'元现金':'金币'}}</span></li>
			</ul>
		</div>
		<div class="luckyDraw_4">
			<h3>金币抽奖规则</h3>
			<p>参与用户：<span>赶紧试全体用户</span></p>
			<ul>
				<span>奖品细则：</span>
				<li>1.每人每天拥有<span>3次抽奖机会</span>，每次抽奖消耗<span>30金币</span>，点击右上角分享给朋友，可增加中奖率。</li>
			</ul>
			<ul>
				<span>奖品说明：</span>
				<li>1.现金奖：系统会即时转入赶紧试账户余额内，可以进行提现。</li>
				<li>2.金币奖：系统会即时转入金币内，可以用来直接通过试用资格(无需商家审核资格)。</li>
			</ul>
			<h3>提示：活动最终解释权归赶紧试所有。</h3>
		</div>
	</div>
</template>

<script>
export default{
	name: 'luckyDraw',
	data: function(){
		return{
			balance: '',//金币余额
			num: '',//今天剩余抽奖次数
			startBtn: true,//抽奖按钮显示隐藏
			start_rotating_degree: 0, //初始旋转角度
      		rotate_angle: 0, //将要旋转的角度
      		rotate_transition: "transform 4s ease-in-out", //初始化选中的过度属性控制
      		rotate_transition_pointer: "transform 12s ease-in-out", //初始化指针过度属性控制
      		luckyList:[],
      		listTimer: '',
		}
	},
	methods:{
		//开始抽奖
		torotat: function(){
			if(!this.startBtn) return;
			if(this.num == 0){
				this.$alert('您今天的抽奖次数已用完');
			}else
			if(this.balance < 30){
				this.$alert('金币不足');
			}
			else{
				this.rotating();
				this.num --;
				this.balance -= 30;
			}
		},
		//抽奖过程
		rotating: function(){
			var _this = this;
			if(!this.startBtn) return;
			this.$loading();
			this.$axios.post('/user/lottery/turntable').then(function(res){
				var data = res.data.result;
				if(res.data.message == 'succ'){
					$('#loading').remove();//去除loading
					var index = data.id - 1;
					var during_time = 3; // 默认为1s
				    var random = Math.floor(Math.random() * 7);
				    var result_index = index; // 最终要旋转到哪一块，对应prize_list的下标
				    var result_angle = [15, 45, 75, 105, 135, 165, 195, 225,255,285,315,345]; //最终会旋转到下标的位置所需要的度数
				    var rand_circle = 10; // 附加多转几圈，2-3
				    _this.startBtn = false; // 旋转结束前，不允许再次触发
				    var rotate_angle =
			        _this.start_rotating_degree +
			        rand_circle * 360 +
			        result_angle[result_index] -
			        _this.start_rotating_degree % 360;
			        _this.start_rotating_degree = rotate_angle;
			        _this.rotate_angle = "rotate(" + rotate_angle + "deg)";
			        // 旋转结束后，允许再次触发
			        setTimeout(function() {
				          _this.startBtn = true;
						if(data.rewardType == '1'){
				            _this.$alert('恭喜您获得了'+ data.reward + '金币!');
						}else if(data.rewardType == '2'){
				            _this.$alert('恭喜您获得了'+ data.reward + '元!');
						}else if(data.rewardType == '0'){
							_this.$alert('未中奖，再接再厉!');
						}
						_this.getNewLucky();
						_this.getBalance();
			//	        _this.game_over(this.i);
			        }, during_time * 1000 + 1000); // 延时，保证转盘转完
				}else{
					$('#loading').remove();//去除loading
					_this.$alert(res.data.result);
				}
			}).catch(function(err){
				console.log(err);
				$('#loading').remove();//去除loading
			})
		},
		//----------获取用户余额----------
		getBalance: function(){
			var _this = this;
			_this.$axios.post("/user/wallet/getWalletInfo").then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.balance = data.result.coins;
				}
			}).catch(function(err){
				console.log(err);
			});
		},
		//----------获取用户剩余抽奖次数----------
		getLottery: function(){
			var _this = this;
			_this.$axios.post("/user/info/getBaseInfo").then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.num = data.result.todayCoinsLottery;
				}
			}).catch(function(err){
				console.log(err);
			});
		},
		//----------获取用户最新中奖消息----------
		getNewLucky: function(){
			var _this = this;
			clearInterval(this.listTimer);
			$('.luckyDraw_3 ul li:first-child').css('margin-top','0');
			_this.$axios.post("/user/lottery/selectNewLottery").then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.luckyList = data.result;
					var top = -16;
					var n = 0;
					_this.listTimer = setInterval(function(){
						var first = _this.luckyList[n];
//						$('.luckyDraw_3 ul li:first-child').animate({marginTop:top + '%'});
						$('.luckyDraw_3 ul li:first-child').css('margin-top',top + '%');
						top -= 16;
						n ++;
						_this.luckyList.push(first);
					},1500);
				}
			}).catch(function(err){
				console.log(err);
			});
		}
	},
	created: function(){
		this.getBalance();
		this.getLottery();
		this.getNewLucky();
	},
	beforeRouteLeave: function(to, from, next){
		next(clearInterval(this.listTimer));
	}
}
</script>

<style scoped>
/* ========== */
/* = Header = */
/* ========== */
#header{
	width: 100%;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #EEEEEE;
	font-size: 1.6rem;
	color: #4F4F4F;
	box-sizing: border-box;
	z-index: 10;
}
#header img{
	height: 2rem;
	display: block;
	position: absolute;
	top: 1rem;
	left: 2rem;
}
#luckyDraw{
	min-height: 100%;
	padding-top: 4rem;
	box-sizing: border-box;
}
/*-------余额----------*/
.luckyDraw_1{
	position: relative;
}
.luckyDraw_1 img{
	width: 100%;
	display: block;
}
.balance{
	font-size: 1.4rem;
	color: #FFFFFF;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	position: absolute;
	left: 22%;
	bottom: 13%;
}
.num{
	font-size: 1.2rem;
	color: #AF5A03;
	position: absolute;
	bottom: 12%;
    right: 11%;
}
.num span{
	font-size: 1.4rem;
	font-weight: 600;
}
/*-------转盘-----------*/
.luckyDraw_2{
	position: relative;
}
.luckyDraw_2 img{
	width: 100%;
	display: block;
}
.disc{
	position: absolute;
	width: 60%;
	height: 68%;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 11%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pointer{
	width: 24%;
	height: 24%;
	transition:transform 1.5s linear;
	position: relative;
}
.pointer div:first-child{
	width: 100%;
	height: 100%;
	position: relative;
}
.pointer div:last-child{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.pointer div:first-child img{
	width: 100%;
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
}
.pointer div:last-child img{
	width: 80%;
	display: block;
	position: absolute;
	bottom: 10%;
	left: 10%;
}
/*---------中奖名单---------*/
.luckyDraw_3{
	position: relative;
}
.luckyDraw_3 img{
	width: 100%;
	display: block;
}
.luckyDraw_3 h3{
	font-size: 1.8rem;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 4%;
	color: #BF2826;
}
.luckyDraw_3 ul{
	height: 68%;
	width: 50%;
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 17%;
	font-size: 1.2rem;
	color: #4F4F4F;
	overflow: hidden;
}
.luckyDraw_3 ul li{
	height: 14.5%;
	display: flex;
	align-items: center;
}
.luckyDraw_3 ul li:first-child{
	transition: 0.5s;
}
.luckyDraw_3 ul li span{
	margin: 0 5px;
}
/*---------抽奖规则-------------*/
.luckyDraw_4{
	background: url('../../static/img/share-12.jpg');
	background-size: 100% auto;
	padding: 1rem 1.5rem;
	box-sizing: border-box;
	padding-bottom: 3rem;
}
.luckyDraw_4 h3{
	font-size: 1.8rem;
	color: #CE4C00;
}
.luckyDraw_4 h3:last-child{
	margin-top: 1.5rem;
}
.luckyDraw_4>p{
	font-size: 1.2rem;
	color: #4F4F4F;
	margin-top: 1rem;
}
.luckyDraw_4 span{
	color: #CE4C00;
}
.luckyDraw_4 ul{
	margin-top: 1.5rem;
	font-size: 1.2rem;
}
.luckyDraw_4 ul li{
	line-height: 2rem;
}
</style>
